<template>
  <div class="">
    <headerXX :name="title"></headerXX>
    <van-pull-refresh
      class="pull-refresh"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-empty
        v-if="goodList.length == 0 && !error"
        image="search"
        description="未找到数据"
      />
      <van-empty v-if="error" image="error" description="网络错误" />
     <van-list
         :immediate-check="false"
        v-model:loading="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <div class="ulbox">
          <div class="ul" v-for="(item, index) in goodList" :key="index">
            <div class="li">
              <div class="li_head">
                <div class="li_left">
                  <van-image :src="item.goodImage" mode="" />
                </div>
                <div class="li_right">
                  <div @click="YYXX(item)">
                    <div class="TT">
                      {{ item.goodName }}
                    </div>
                    <div class="li_state">
                      <span class="li_state_info"> 活动{{ item.state }} </span>
                    </div>
                    <div class="JJ">活动简介：{{ item.goodDescription }}</div>
                  </div>
                </div>
              </div>
              <van-divider
                :style="{ color: '#979797', padding: '0px', margin: '0px' }"
              />
              <div class="li_foot">
                <div class="li_foot_left">
                  <div style="display: flex; align-items: center">
                    <van-icon
                      name="clock-o"
                      color="#979797"
                      size="16"
                    ></van-icon>
                    <div style="width: 5px"></div>
                    活动时间：{{ item.expertOrderTime }}
                  </div>
                  <div
                    style="margin-top: 10px; display: flex; align-items: center"
                  >
                    <van-icon
                      name="location-o"
                      color="#979797"
                      size="18"
                    ></van-icon>
                    <div style="width: 5px"></div>
                    活动地点：{{ item.goodLocation }}
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 13px;
                  "
                >
                  <div
                    v-if="item.state == '预约中'"
                    class="li_right_btn"
                    style="border: 1px solid #36c2a8; color: #36c2a8"
                    @click="YYXX(item)"
                  >
                    报名
                  </div>
                  <div class="li_right_btn" v-else>
                    <span>{{ item.state }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #error>
          <div class="error-tip" @click="retryLoad">
            <van-icon name="warning" />
            <span>加载失败，点击重试</span>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getEventList } from "@/api/realAssets/icsharedstation/QNY_JKZX_NXGA/index.js";
import moment from "moment";
import headerXX from "../../components/title.vue";
import { testUserMessage } from "../../common/testUser.js";
export default {
  components: {
    headerXX,
  },
  data() {
    return {
      goodList: [],
      dataInfo: {},
      loading: false,
      finished: false,
      refreshing: false,
      error: false,
      title: "青年园",
      siteData: JSON.parse(localStorage.getItem("siteData")),
      nowTime: new Date().getTime(),
      pageData: {
        pageNumber: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    queryList() {
      this.loading = true;
      if (this.error) return; // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.goodList = [];
      }
      getEventList({
        siteId: this.siteData.id,
        pageNumber: this.pageData.pageNumber,
        pageSize: this.pageData.pageSize,
      })
        .then((res) => {
          if (res.resultMessage != "SUCCESS") {
            this.goodList = [];
            this.error = true; // 显示错误提示
          } else if (res.data.length == 0) {
            this.goodList = [];
            this.finished = true;
          } else {
            let dataList = res.data.map((item) => {
              if (this.nowTime < moment(item.eventEndTime).unix() * 1000) {
                item.state = "预约中";
              } else {
                item.state = "已结束";
              }
              return {
                goodId: item.id,
                goodName: item.eventName,
                goodImage: item.eventImage,
                goodLocation: item.eventLocation,
                goodEventParticipator: item.eventParticipator,
                expertOrderTime: moment(item.eventStartTime).format(
                  "YYYY-MM-DD"
                ),
                serviceStartTime: moment(item.eventStartTime).format(
                  "YYYY-MM-DD HH:mm"
                ),
                serviceEndTime: moment(item.eventEndTime).format(
                  "YYYY-MM-DD	HH:mm"
                ),
                serviceEndDateNum: moment(item.eventEndTime).unix() * 1000,
                goodSiteId: item.siteId,
                goodDescription: item.eventDescription,
                remark: item.remark,
                state: item.state,
              };
            });
            this.goodList = [...this.goodList, ...dataList];
          }
          this.loading = false;
          // 判断是否已加载完所有数据
          if (this.goodList.length == res.pageNum) {
            this.finished = true;
          } else {
            this.pageData.pageNumber++;
          }
          this.refreshing = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    YYXX(item) {
      let li = encodeURIComponent(JSON.stringify(item));
      this.$router.push({
        name: "rvicsharedstation-QNY_hddetail",
        query: {
          HDXQ: li,
        },
      });
    },
    // 下拉刷新
    onRefresh() {
      this.pageData.pageNumber = 1;
      this.pageData.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.queryList();
    },
    retryLoad() {
      this.error = false;
      this.loading = true;
      this.queryList();
    },
  },
  mounted() {
    testUserMessage("青年园").then((siteData) => {
      this.siteData = siteData[0];
      this.queryList();
    });
  },
};
</script>

<style scoped lang="less">
@import "../../static/css/index.less";
@import "./qny.less";
.li_state {
  margin: 9px;
  font-size: 12px;
  .li_state_info {
    color: #737478;
    background-color: #f2f2f4;
    padding: 3px 10px;
  }
}
.li_foot_left {
  color: #353535;
  font-size: 13px;
}

.TT {
  font-size: 16px;
  line-height: 15px;
  font-weight: 500;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.JJ {
  display: -webkit-box;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 2px;
  height: 45px;
  width: 100%;
  margin: 5px 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #979797;
}
.li_right_btn {
  color: #808080;
  border-radius: 10px;
  border: 1px solid #808080;
  width: 60px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
